<template>
  <div class="detail-box">
    <el-dialog
        v-model="detailDialogVisible"
        title="审批记录"
        width="80%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
        style="height: 55vh;
        background-color:#fff;"
    >
      <!--#region-->
      <!--<div class="leave-detail-box">-->
      <!--  <div class="top">-->
      <!--    <div class="t1">-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">申请时间</div>-->
      <!--        <div class="t1-con">{{computeDate(detail_form.created_at)}}</div>-->
      <!--      </div>-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">用章类型</div>-->
      <!--        <div class="t1-con" v-if="detail_form.seal_type === 0">-->
      <!--          <el-tag type="info">公章</el-tag>-->
      <!--        </div>-->
      <!--        <div class="t1-con" v-else-if="detail_form.seal_type === 1">-->
      <!--          <el-tag type="info">法人章</el-tag>-->
      <!--        </div>-->
      <!--        <div class="t1-con" v-else>-->
      <!--          <el-tag type="info">合同章</el-tag>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div class="t1" v-if="detail_form.seal_take === 1">-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">是否外借</div>-->
      <!--        <div class="t1-con">{{detail_form.seal_take === 1 ? '是' : '否'}}</div>-->
      <!--      </div>-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">是否归还</div>-->
      <!--        <div class="t1-con">{{detail_form.seal_flow_return === 1 ? '是' : '否'}}</div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div class="t1">-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">用印项目</div>-->
      <!--        <div class="t1-con">{{detail_form.seal_project}}</div>-->
      <!--      </div>-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">描述</div>-->
      <!--        <div class="t1-con">{{detail_form.seal_subject}}</div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div class="t1">-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">附件大小</div>-->
      <!--        <div class="t1-con">-->
      <!--          {{(processSealFileJSON(detail_form.file).size-0).toFixed(2)}}M-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="t1-item">-->
      <!--        <div class="t1-title">附件</div>-->
      <!--        <div class="t1-con">-->
      <!--          <el-button-->
      <!--            @click="downloadSealFile(detail_form.seal_flow_id)"-->
      <!--            type="info"-->
      <!--          >-->
      <!--            下载附件-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--            @click="previewFile()"-->
      <!--            type="info"-->
      <!--          >-->
      <!--            预览附件-->
      <!--          </el-button>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--  </div>-->
      <!--  <div class="bot">-->
      <!--    <div class="b1">-->
      <!--      <div class="b1-item">-->
      <!--        <div class="b1-title">审核状态</div>-->
      <!--        <div class="b1-con">-->
      <!--          <div v-if="detail_form.seal_flow_status === 0">已提交</div>-->
      <!--          <div v-if="detail_form.seal_flow_status === 1">审核中</div>-->
      <!--          <div v-if="detail_form.seal_flow_status === 2">已完成</div>-->
      <!--          <div v-if="detail_form.seal_flow_status === 3">已撤销</div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="b1-item">-->
      <!--        <div class="b1-title">当前审核人</div>-->
      <!--        <div class="b1-con">{{ detail_form.operatorName }}</div>-->
      <!--      </div>-->
      <!--      <div class="b1-item">-->
      <!--        <div class="b1-title">抄送人</div>-->
      <!--        <div class="b1-con">-->
      <!--          {{ detail_form.seal_flow_copy ? detail_form.seal_flow_copy : '无' }}-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div class="b2">-->
      <!--      <div class="b2-item">-->
      <!--        <div class="b2-title">历史审批</div>-->
      <!--        <div class="b2-con" v-if="historyOperator.length">-->
      <!--          <p v-for="(item,index) in historyOperator" :key="index" style="font-weight: 600; color: #1E90FF">-->
      <!--            {{ item }}&nbsp;-->
      <!--            <span v-if="!isLastItem(index)" style="font-weight: 400; color: black">-->
      <!--              -> &nbsp;-->
      <!--            </span>-->
      <!--          </p>-->
      <!--        </div>-->
      <!--        <div class="b2-con" v-else>-->
      <!--          暂无数据-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--  </div>-->
      <!--</div>-->
      <!--#endregion-->
      <el-table
          :data="tableData"
          stripe
          style="width: 100%;height: 45vh;"
          border
          max-height="91vh"
          empty-text="暂无数据"
      >
        <el-table-column
            fixed
            type="index"
            width="50"
            align="center"
        />
        <el-table-column
            label="审批人"
            width="100"
            align="center"
            prop="operatorName"
        />
        <el-table-column
            label="审批意见"
            width="700"
            align="center"
            prop="check_describe"
        />
        <el-table-column
            label="审批结果"
            width="100"
            align="center"
            prop="check_result"
        >
          <template #default="{row}">
            <el-tag type="success" v-if="row.check_result === 1">同意</el-tag>
            <el-tag type="warning" v-else-if="row.check_result === 2">驳回修改</el-tag>
            <el-tag type="warning" v-else-if="row.check_result === 0">拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="时间"
            width="100"
            align="center"
        >
          <template #default="{row}">
            {{computeDate(row.created_at)}}
          </template>
        </el-table-column>
        <el-table-column
            label="意见文件"
            align="center"
        >
          <template #default="{row}">
            <el-button
                v-if="row.file"
                @click="previewFile(row.history_flow_id)"
            >
              附件预览
            </el-button>
            <el-button
                v-if="row.file"
                @click="downloadFile(row.history_flow_id,row.uploaderName,row.file)"
            >
              下载附件
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElButton, ElDialog, ElMessage, ElMessageBox, ElTable, ElTableColumn} from "element-plus"
import {getALLFlowList, getCurrentFlow, recallFlow} from "@/api"
import {onMounted, reactive, ref, defineEmits} from "vue"
import {useRoute} from "vue-router"
import {delSealApprove, downSeal, getSealApproveDetails, preview} from "@/api/OA/Seal"
import {createMsg, processSealFileJSON, turnToDatetime} from "@/lib/utils"
import {previewYRL} from "@/api/http"
import {download, getAppHistory} from "@/api/OA/Approve"

const route = useRoute()
const emits = defineEmits(['refreshPassed','refreshRefused','refreshGoing','refreshAll'])

const isRecallShow = ref(true)
const userId = ref('')
const detailDialogVisible = ref(false)
const historyOperator = ref([])
let detail_form = reactive({})
const tableData = ref([])
const history_operator = ref([])

let currentId

onMounted(()=>{
  userId.value = getId()
  if(route.path === '/OA/seal/allowed' || route.path === '/OA/seal/rejected' || detail_form.status === 2){
    isRecallShow.value = false
  } else if (route.path === '/OA/seal/copy' || route.path === '/OA/seal/usage-log'){
    isRecallShow.value = false
  }
})

const getId = () => {
  const info = JSON.parse(localStorage.getItem('syhyDocManSys'))
  return info.id
}

const getList = async () => {
  try {
    const {data:res} = await getALLFlowList({
      userId : userId.value
    })
    if(res && res.code === 201){
      return ElMessage({
        type:'info',
        message:'暂无请假申请'
      })
    } else if (res && res.code === 200) {
      tableData.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

const showDetails = async (id) => {
  currentId = id
  try {
    const {data:res} = await getAppHistory(id)
    if(res.code === 200){
      tableData.value = res.data
      detailDialogVisible.value = true
    } else if (res.code === 202){
      historyOperator.value = []
    } else if (res.code === 201){
      return createMsg('暂无审批记录','info',true)
    }
  } catch (e) {
    console.log(e)
  }
}


const recall = async () => {
  if(detail_form.seal_flow_status === 2) return createMsg('已完成的流程不能撤销','error',false)
  try {
    const res = window.confirm('撤销后该流程无法恢复,确认操作吗?')
    if (res){
      const {data:res} = await delSealApprove(currentId,userId.value)
      if (res.code === 200){
        if (route.path === '/OA/seal/going'){
          detailDialogVisible.value = false
          emits('refreshGoing')
        } else if (route.path === '/OA/seal/all')
          detailDialogVisible.value = false
        emits('refreshAll')
        return createMsg('操作成功!','success',true)
      } else if (res.code === 201){
        detailDialogVisible.value = false
        return createMsg(res.data,'info',true)
      } else {
        detailDialogVisible.value = false
        return createMsg(res.data,'warning',true)
      }
    }
  } catch (e) {
    console.log(e)
  }
}

const computeDate = (date) => {
  return date.substring(0,10)
}

const isLastItem = (index) => {
  return index === historyOperator.value.length - 1;
}

const downloadSealFile = async (id) => {
  try {
    const res = await downSeal(id)
    const type = processSealFileJSON()
    // 创建一个新的 URL 对象，并生成一个下载链接
    const url = window.URL.createObjectURL(new Blob([res.data],
        { type: type.type }))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', `${detail_form.uploaderName}的用印附件.${type.ext}`); // 设置下载的文件名
    link.style.display = 'none' // 隐藏元素
    document.body.appendChild(link);
    link.click();

    // 清理 DOM 和释放 URL 对象
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  } catch (e) {
    console.log(e)
  }
}

const previewFile = async (id) => {
  await window.open(`${previewYRL}/previewS?approveId=${id}`)
}

const downloadFile = async (id,uploaderName,file) => {
  try {
    const res = await download(id)
    const type = processSealFileJSON(file)
    // 创建一个新的 URL 对象，并生成一个下载链接
    const url = window.URL.createObjectURL(new Blob([res.data],
        { type: type.type }));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${uploaderName}的用印附件.${type.ext}`); // 设置下载的文件名
    link.style.display = 'none' // 隐藏元素
    document.body.appendChild(link);
    link.click()
    // 清理 DOM 和释放 URL 对象
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (e) {
    console.log(e)
  }
}

defineExpose({
  showDetails,
})
</script>

<style scoped lang="less">
.detail-box{
  box-sizing: border-box;
  height: 95%;
  .leave-detail-box{
    width: 95%;
    margin: 3vh auto;
    .top{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      display: flex;
      flex-direction: column;
      margin-top: 2vh;
      .t1{
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        display: flex;
        justify-content: space-between;
        .t1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t1-title{
            font-weight: 600;
            text-align: center;
            width: 30%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .t2{
        width: 100%;
        font-size: 1.6vh;
        background-color:#fff;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .t2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t2-title{
            font-weight: 600;
            text-align: center;
            width: 15%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
    .bot{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      margin-top: 3vh;
      display: flex;
      flex-direction: column;
      .b1{
        display: flex;
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        .b1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b1-title{
            font-weight: 600;
            text-align: center;
            width: 49%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .b2{
        background-color:#fff;
        width: 100%;
        font-size: 1.6vh;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .b2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b2-title{
            font-weight: 600;
            text-align: center;
            width: 14%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
            display: flex;
            line-height: 5vh;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
